<template>
  <nav class="navbar">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">银发护航</a>
      <div class="navbar-nav" id="navbarNav">
        <ul class="navbar-nav me-auto">
          <li
            class="nav-item"
            v-for="(navItem, index) in navItems"
            :key="index"
          >
            <a
              class="nav-link"
              :class="{ active: activeNavItem === navItem.value }"
              href="#"
              @click="selectNavItem(navItem)"
            >
              {{ navItem.label }}
            </a>
          </li>
        </ul>
      </div>
      <span class="navbar-text"> 银发护航, 改进人们的养老服务 </span>
    </div>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      navItems: [
        { label: "用户管理", value: "user" },
        { label: "设备管理", value: "facility" },
        { label: "设备维修", value: "repair" },
        { label: "返回数据统计", value: "dashboard" },
      ],
      activeNavItem: "user",
    };
  },
  methods: {
    selectNavItem(navItem) {
      if (navItem.value === this.activeNavItem) return;
      this.activeNavItem = navItem.value;
      this.$router.push({ name: navItem.value });
    },
  },
  created() {
    this.activeNavItem = this.$route.name;
  },
};
</script>

<style lang="scss" scoped>
.navbar {
  background-color: #000034;
  padding: 1rem;

  .container-fluid {
    display: flex;
    align-items: center;

    .navbar-brand {
      font-size: 1.5rem;
      font-weight: bold;
      color: #fff;
    }

    .navbar-nav {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 2rem;

      .nav-item {
        margin-right: 1rem;

        .nav-link {
          font-size: 1.1rem;
          color: #fff;
          transition: color 0.1s ease;

          &:hover,
          &.active {
            color: #05d6fa;
          }
        }
      }
    }

    .navbar-text {
      font-size: 0.9rem;
      color: #ccc;
      margin-left: auto;
    }
  }
}
</style>
